/*
 * @Author: wei
 * @description: 修改element主题和变量
 * @LastEditTime: 2022-06-21 15:45:45
 */
// https://github.dev/element-plus/unplugin-element-plus

// @forward 'element-plus/theme-chalk/src/common/var.scss' with (
//   $colors: (
//     'primary': (
//       'base': #018E9A,
//     )
//   )
// );

:root {
    --el-color-primary: var(--yh-brand-color);
    --el-color-primary-light-3: var(--yh-brand-color-7) --el-color-primary-light-5:var(--yh-brand-color-5);
    --el-color-primary-light-7: var(--yh-brand-color-3) --el-color-primary-light-8: #d9ecff;
    --el-color-primary-light-9: #ecf5ff;
    
    .el-textarea__inner{
        --el-input-focus-border-color:var(--yh-brand-color);
    }
}

:root[theme-mode=dark] {
    --prism-scheme: dark;
    --prism-foreground: #a6accd;
    --prism-background: #181818;
    --prism-comment: #758575;
    --prism-string: #c3e88d;
    --prism-literal: #429988;
    --prism-keyword: #89ddff;
    --prism-boolean: #6394bf;
    --prism-number: #6394bf;
    --prism-variable: #c2b36e;
    --prism-function: #82aaff;
    --prism-deleted: #bc6066;
    --prism-class: #54b1bf;
    --prism-builtin: var(--el-color-primary-light-3);
    --prism-property: #c792ea;
    --prism-namespace: #db889a;
    --prism-punctuation: #89ddff;
    --prism-decorator: #bd8f8f;
    --prism-regex: #ab5e3f;
    --prism-json-property: #6b8b9e;
    --prism-line-number: #888888;
    --prism-line-number-gutter: #eeeeee;
    --prism-line-highlight-background: #444444;
    --prism-selection-background: #444444;
    --prism-inline-background: #2d2d2d;


    --el-color-primary-light-8: #1d3043;
    --el-color-primary-light-9: #18222c;
    --el-color-primary-dark-2: #66b1ff;
    --el-color-success: #67c23a;
    --el-color-success-light-3: #4e8e2f;
    --el-color-success-light-5: #3e6b27;
    --el-color-success-light-7: #2d481f;
    --el-color-success-light-8: #25371c;
    --el-color-success-light-9: #1c2518;
    --el-color-success-dark-2: #85ce61;
    --el-color-warning: #e6a23c;
    --el-color-warning-light-3: #a77730;
    --el-color-warning-light-5: #7d5b28;
    --el-color-warning-light-7: #533f20;
    --el-color-warning-light-8: #3e301c;
    --el-color-warning-light-9: #292218;
    --el-color-warning-dark-2: #ebb563;
    --el-color-danger: #f56c6c;
    --el-color-danger-light-3: #b25252;
    --el-color-danger-light-5: #854040;
    --el-color-danger-light-7: #582e2e;
    --el-color-danger-light-8: #412626;
    --el-color-danger-light-9: #2b1d1d;
    --el-color-danger-dark-2: #f78989;
    --el-color-error: #f56c6c;
    --el-color-error-light-3: #b25252;
    --el-color-error-light-5: #854040;
    --el-color-error-light-7: #582e2e;
    --el-color-error-light-8: #412626;
    --el-color-error-light-9: #2b1d1d;
    --el-color-error-dark-2: #f78989;
    --el-color-info: #909399;
    --el-color-info-light-3: #6b6d71;
    --el-color-info-light-5: #525457;
    --el-color-info-light-7: #393a3c;
    --el-color-info-light-8: #2d2d2f;
    --el-color-info-light-9: #202121;
    --el-color-info-dark-2: #a6a9ad;
    --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .36), 0px 8px 20px rgba(0, 0, 0, .72);
    --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .72);
    --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .72);
    --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
    --el-bg-color-page: #0a0a0a;
    --el-bg-color: #141414;
    --el-bg-color-overlay: #1d1e1f;
    --el-text-color-primary: #E5EAF3;
    --el-text-color-regular: #CFD3DC;
    --el-text-color-secondary: #A3A6AD;
    --el-text-color-placeholder: #8D9095;
    --el-text-color-disabled: #6C6E72;
    --el-border-color-darker: #636466;
    --el-border-color-dark: #58585B;
    --el-border-color: #4C4D4F;
    --el-border-color-light: #414243;
    --el-border-color-lighter: #363637;
    --el-border-color-extra-light: #2B2B2C;
    --el-fill-color-darker: #424243;
    --el-fill-color-dark: #39393A;
    --el-fill-color: #303030;
    --el-fill-color-light: #262727;
    --el-fill-color-lighter: #1D1D1D;
    --el-fill-color-extra-light: #191919;
    --el-fill-color-blank: transparent;
    --el-mask-color: rgba(0, 0, 0, .8);
    --el-mask-color-extra-light: rgba(0, 0, 0, .3);

    --bg-color-soft: #242424;
    --bg-color-mute: #2c2c2c;

    // --categories-c-bg: #1D1E1F;
    // --categories-c-page: #0A0A0A;
    // --categories-c-overlay: #141414;
    // --categories-c-text: #53637A;
    // --categories-c-icon: #2F333D;
    // --categories-c-line: #242529;
}


.dark .el-popover.el-popper {
    background: var(--el-bg-color-overlay);
    border: 1px solid var(--el-border-color-light);
}
// tooltip颜色重置
.el-popper.is-gb-tooltip {
    color:var(--el-text-color-regular) ;
    background:var(--el-bg-color-overlay) ; 
    border: 1px solid var(--el-border-color-light) ;
}
.el-popper.is-light {
    color:var(--el-text-color-regular) ;
}

html .el-popover.el-popper {
    min-width: 100px;
}

.el-message.message_top {
    z-index: 10000 !important;
}

.el-message {
    background-color: var(--yh-bg-color-container);
    box-shadow: var(--yh-shadow-3), var(--yh-shadow-inset-top), var(--yh-shadow-inset-right), var(--yh-shadow-inset-bottom), var(--yh-shadow-inset-left);
    border: none;

    .el-message__icon {
        font-size: 20px;
    }

    &.el-message--info .el-message__icon {
        color: var(--yh-brand-color);
    }

    &.el-message--success .el-message__icon {
        color: var(--yh-success-color);
    }

    &.el-message--warning .el-message__icon {
        color: var(--yh-warning-color);
    }

    &.el-message--error .el-message__icon {
        color: var(--yh-error-color);
    }

    .el-message__content {
        color: var(--yh-text-color-primary);
    }
}

.el-button.button-no-active {

    &:active,
    &:focus {
        background-color: var(--el-button-bg-color);
        border-color: var(--el-button-bg-color);
        outline: 0;
    }

    &:hover {
        background-color: var(--yh-brand-color-hover);
        border-color: var(--yh-brand-color-hover);

    }
}

.message-box-default {
    .el-message-box__status.el-icon {
        color: var(--yh-brand-color);
        --el-messagebox-color: var(--yh-brand-color);
    }
}

.el-overlay .el-overlay-message-box {
    .el-message-box {
        margin-top: -20vh;
    }
}


